<template>
	<z-paging-swiper class="page">

		<city-head></city-head>
		<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
			value-key="id" :active-style="{'font-size':'36rpx','font-weight':'bold','color': '#333333'}"
			:inactive-style="{'font-size':'28rpx','color': '#666666'}">
			<template slot="right">
				<view class="selectMore uni-flex uni-justify-between uni-align-center" @click="openFilterPopup">
					<!-- 筛选 -->
					<uni-icons type="search" size="28" color="#999999"></uni-icons>
				</view>
				<!-- 筛选弹窗 -->
				<uni-popup ref="filterPopup" type="top">
					<FilterPopup ref="filterPopupContent" :tabsList="tabsList" :currentIndex="currentIndex"
						@close="closeFilterPopup" @confirm="handleFilterConfirm" />
				</uni-popup>
			</template>
		</z-tabs>
		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<find-part-time-item ref="listItem" :tabIndex="index" :currentIndex="currentIndex"
					:currentId="currentId" :jobName="state.jobName"></find-part-time-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		ref,
		onMounted,
		toRefs,
		reactive,
		nextTick
	} from 'vue';
	import findPartTimeItem from '@/pages/tabBars/findPartTimeJob/findPartTimeItem.vue'
	import cityHead from "@/components/city-head/index.vue";
	import FilterPopup from "./components/FilterPopup.vue";

	import {
		queryTabList
	} from "@/api/findPartTimeJob";
	import {
		getCityCode
	} from "@/common/util.js";
	const tabsRef = ref(null); // 修复：统一ref命名
	const listItem = ref([]); // 存储子组件实例
	const filterPopup = ref();
	const filterPopupContent = ref();
	const state = reactive({
		tabsList: [],
		currentIndex: 0,
		currentId: 1,
		jobName: ''
	});
	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);

	// 处理筛选弹窗的确认事件
	const handleFilterConfirm = (filterParams) => {
		const {
			relatedTags,
			jobName
		} = filterParams;

		// 对jobName进行decodeURIComponent解码
		state.jobName = jobName ? decodeURIComponent(jobName) : '';

		currentId.value = relatedTags.length > 0 ?
			relatedTags.join(',') :
			tabsList.value[0]?.id || 0;

		listItem.value[currentIndex.value]?.reload();
	};


	// 标签切换时强制刷新对应列表
	const changeTab = async (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
		// 关键：等待子组件更新后强制刷新
		await nextTick();
		// listItem.value[index]?.reload();
	};

	const onChange = (e) => {
		currentIndex.value = e.detail.current;
		// 滑动切换时也强制刷新
		// listItem.value[currentIndex.value]?.reload();
	};

	const swiperTransition = (e) => {
		tabsRef.value?.setDx(e.detail.dx);
	};

	const swiperAnimationfinish = (e) => {
		currentIndex.value = e.detail.current;
		tabsRef.value?.unlockDx();
		// 滑动结束后再次确认刷新
		listItem.value[currentIndex.value]?.reload();
	};

	const openFilterPopup = () => {
		filterPopup.value.open();
	};

	// 关闭筛选弹窗
	const closeFilterPopup = () => {
		filterPopup.value.close();
	};

	onMounted(() => {
		queryTabList({
			cityCode: getCityCode()
		}).then(res => {
			tabsList.value = res.data || [];
			// 初始化第一个标签数据
			if (tabsList.value.length > 0) {
				currentId.value = tabsList.value[0].id;
				nextTick(() => {
					listItem.value[0]?.reload();
				});
			}
		});
	});
</script>

<style lang="scss" scoped>
	.page {
		.swiper {
			height: calc(100vh - 200rpx);
			/* 固定高度，避免内容塌陷 */
			background-color: #f5f5f5;
		}
	}

	.selectMore {
		width: 80rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 0 25rpx;

		.more_img {
			width: 16rpx;
			height: 16rpx;
			margin-top: 6rpx;
		}
	}
</style>